<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <!-- 

    Vue.set(target,key,val)方法可以给已有对象添加属性，添加的属性有set和get方法，是响应式的
    vm.$set(target,key,val)方法跟上面的方法一样
     注意: Vue.set()和vm.$set()方法中不能给vm或vm的根数据对象添加属性!!!!
   -->
  <body>
    <div id="root">
      <h1>学校信息</h1>
      <h3>学校名字:{{school.name}}</h3>
      <br />
      <h3>学校地址:{{school.address}}</h3>
      <br />
      <h3>校长:{{school.leader}}</h3>
      <h1>人员信息</h1>
      <button @click="addSex">点击按钮给人员添加性别</button>
      <h3>人员名称:{{person.name}}</h3>
      <br />
      <h3>人员年龄:{{person.age}}</h3>
      <br />
      <h3 v-if="person.sex">性别:{{person.sex}}</h3>
      <br />
      <h3>
        {{person.name}}的朋友们
        <ul>
          <li v-for="(f,index) in person.friends" :key="index">
            姓名:{{f.name}}--年龄:{{f.age}}
          </li>
        </ul>
      </h3>
    </div>

    <script>
      //创建Vue实例,得到 ViewModel
      const vm = new Vue({
        el: '#root',
        data: {
          // leader: '',
          school: {
            name: '尚硅谷',
            address: '北京',
          },
          person: {
            name: '小王',
            age: 18,
            friends: [
              { name: '张三', age: 20 },
              { name: '李四', age: 30 },
            ],
          },
        },
        methods: {
          addSex() {
            // Vue.set(this.person, 'sex', '男')
            this.$set(this.person, 'sex', '男')
          },
        },
        computed: {},
      })
    </script>
  </body>
</html>
